<template>
  <div v-loading="loading" class="dashboard-container">
    <div class="app-container">
      <!-- 工具栏 -->
      <page-tools :show-before="true">
        <!-- 前面内容 -->
        <template v-slot:before
          >有 {{ attendInfo.tobeTaskCount }} 条考勤审批尚未处理
          <el-col>
            <el-row type="flex" justify="space-between">
              <el-button size="mini" @click="openPunchDialog"
                >打卡范围</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="$router.push('/import?type=attendance')"
                >导入</el-button
              >
              <el-button size="mini" type="warning">提醒</el-button>
              <el-button size="mini" type="primary" @click="handleSet"
                >设置</el-button
              >
              <el-button
                size="mini"
                type="default"
                @click="$router.push('/attendances/archiving/')"
                >历史归档</el-button
              >
              <el-button
                size="mini"
                type="primary"
                @click="
                  $router.push({ path: '/attendances/report/' + yearMonth })
                "
                >{{ yearMonth }}报表</el-button
              >
            </el-row>
          </el-col>
        </template>
      </page-tools>
      <el-card class="hr-block">
        <el-form
          ref="formData"
          :model="formData"
          label-width="120px"
          class="formInfo"
        >
          <el-form-item label="部门:">
            <el-checkbox-group v-model="formData.deptID">
              <el-checkbox
                v-for="item in departments"
                :key="item.id"
                :label="item.name"
              >
                {{ item.name }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="考勤状态：">
            <el-radio-group v-model="formData.stateID">
              <el-radio
                v-for="item in stateData.holidayType"
                :key="item.id"
                :label="item.value"
                :value="item.value"
              >
                {{ item.value }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-card>
      <!-- 考勤数据 -->
      <el-card class="hr-block">
        <!-- 考勤列表 -->
        <div
          style="
            width: 100%;
            position: relative;
            overflow-x: auto;
            overflow-y: hidden;
          "
        >
          <div style="width: 3000px">
            <table
              border="0"
              align="center"
              cellpadding="0"
              cellspacing="0"
              class="tableInfo"
            >
              <tr>
                <th width="50">序号</th>
                <th width="100">姓名</th>
                <th width="100">工号</th>
                <th width="200">部门</th>
                <th width="100">手机</th>
                <th v-for="(it, ind) in monthOfReport" :key="ind" width="110">
                  {{ attendInfo.month }}/{{ ind + 1 }}
                </th>
              </tr>
              <tr v-for="(item, index) in list" :key="item.id">
                <td width="50">{{ index }}</td>
                <td width="100">{{ item.username }}</td>
                <td width="100">{{ item.workNumber }}</td>
                <td width="200">{{ item.departmentName }}</td>
                <td width="100">{{ item.mobile }}</td>
                <td
                  v-for="(it, ind) in item.attendanceRecord"
                  :key="ind"
                  width="110"
                  @click="showChangeDialog(item, ind, it)"
                >
                  <span v-if="it.adtStatu === 1">√</span>
                  <span v-if="it.adtStatu === 2">旷工</span>
                  <span v-if="it.adtStatu === 3">迟到</span>
                  <span v-if="it.adtStatu === 4">早退</span>
                  <span v-if="it.adtStatu === 5">外出</span>
                  <span v-if="it.adtStatu === 6">出差</span>
                  <span v-if="it.adtStatu === 7">年假</span>
                  <span v-if="it.adtStatu === 8">事假</span>
                  <span v-if="it.adtStatu === 9">病假</span>
                  <span v-if="it.adtStatu === 10">婚假</span>
                  <span v-if="it.adtStatu === 11">丧假</span>
                  <span v-if="it.adtStatu === 12">产假</span>
                  <span v-if="it.adtStatu === 13">奖励产假</span>
                  <span v-if="it.adtStatu === 14">陪产假</span>
                  <span v-if="it.adtStatu === 15">探亲假</span>
                  <span v-if="it.adtStatu === 16">工伤假</span>
                  <span v-if="it.adtStatu === 17">调休</span>
                  <span v-if="it.adtStatu === 18">产检假</span>
                  <span v-if="it.adtStatu === 19">流产假2</span>
                  <span v-if="it.adtStatu === 20">长期病假</span>
                  <span v-if="it.adtStatu === 21">测试架</span>
                  <span v-if="it.adtStatu === 22">补签</span>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <el-dialog :visible.sync="centerDialogVisible" width="30%" center>
          <span slot="title" style="color: #fff"
            >{{ attendInfo.name }} {{ attendInfo.month }}/{{
              attendInfo.getDate
            }}（实际工作日考勤方案）</span
          >
          <div class="attenInfo">
            <p class="colRed">注：统计考勤时，异常状态优先正常状态</p>
            <p class="check">
              <el-radio-group v-model="modifyData.adtStatu">
                <el-radio
                  v-for="item in stateData.vacationtype"
                  :key="item.id"
                  :label="item.id"
                  :value="item.name"
                  >{{ item.name }}</el-radio
                >
              </el-radio-group>
            </p>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="btnOK">确定</el-button>
            <el-button @click="centerDialogVisible = false">取消</el-button>
          </span>
        </el-dialog>
        <!-- 分页组件 -->
        <el-row
          type="flex"
          align="middle"
          justify="center"
          style="height: 60px"
        >
          <el-pagination
            :page-size="page.pagesize"
            :current-page="page.page"
            layout="prev, pager, next"
            :total="page.total"
            @current-change="pageChange"
          />
        </el-row>
      </el-card>
    </div>
    <el-card>
      <!-- 提醒组件 -->
      <el-dialog
        title="提醒"
        :visible.sync="tipsDialogVisible"
        width="280px"
        center
      >
        <div class="attenInfo">
          <p>
            系统将通过邮件与短信的形式，对全体员工中存在旷工的考勤进行提醒，该提醒每月仅可发送
            1 次。
          </p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleSub">我知道了</el-button>
          <el-button @click="centerDialogVisible = false">取消</el-button>
        </span>
      </el-dialog>
      <!-- 设置组件 -->
      <attendance-set ref="set" @handleCloseModal="handleCloseModal"
    /></el-card>
    <!-- 打卡范围弹窗 -->
    <el-dialog title="打卡范围" :visible.sync="showPunchCardDialog" fullscreen>
      <!-- 左右布局 -->
      <el-row>
        <el-col :span="18">
          <!-- 高德地图 -->
          <div id="container"></div>
        </el-col>
        <el-col :span="6">
          <!-- 表格和半径 -->
          <el-table
            ref="companyTable"
            style="width: 200px"
            :show-header="false"
            highlight-current-row
            row-key="id"
            max-height="600"
            stripe
            border
            :data="companyList"
            @row-click="selectRow"
          >
            <el-table-column align="center" width="200px" prop="name" />
          </el-table>
          <!-- 多少米的进度条 -->
          <div style="margin-top: 20px; margin-left: 20px">
            <span>半径</span>
            <el-slider
              v-model="currentRow.radius"
              :min="10"
              :max="1000"
              style="width: 200px"
            />
          </div>
        </el-col>
      </el-row>

      <!-- 尾部结构 -->
      <template #footer>
        <el-row type="flex" justify="end">
          <el-button size="mini" @click="showPunchCardDialog = false"
            >取消</el-button
          >
          <el-button type="primary" size="mini" @click="btnSaveCompany"
            >批量保存</el-button
          >
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

  <script>
import {
  getAttendancesList,
  getCompanyList,
  updateCompanyList,
} from "@/api/attendance";
import AttendanceSet from "./components/attendance-set";
import { getDepartment } from "@/api/department";
import pageTools from "./components/page-tools.vue";
export default {
  name: "Attendances",
  components: { AttendanceSet, pageTools },
  data() {
    return {
      currentRow: {}, // 当前对象
      companyList: [],
      showPunchCardDialog: false, // 打卡范围变量
      list: [],
      selectData: [],
      stateData: {
        // 假期类型
        holidayType: [
          {
            id: "1",
            value: "正常",
            isEnable: false,
          },
          {
            id: "2",
            value: "旷工",
            isEnable: false,
          },
          {
            id: "3",
            value: "事假",
            isEnable: false,
          },
          {
            id: "4",
            value: "调休",
            isEnable: false,
          },
          {
            id: "5",
            value: "迟到",
            isEnable: false,
          },
          {
            id: "6",
            value: "早退",
            isEnable: false,
          },
        ],
        vacationtype: [
          {
            id: "1",
            name: "正常",
          },
          {
            id: "2",
            name: "旷工",
          },
          {
            id: "3",
            name: "迟到",
          },
          {
            id: "4",
            name: "早退",
          },
          {
            id: "5",
            name: "外出",
          },
          {
            id: "6",
            name: "出差",
          },
          {
            id: "7",
            name: "年假",
          },
          {
            id: "8",
            name: "事假",
          },
          {
            id: "9",
            name: "病假",
          },
          {
            id: "10",
            name: "婚假",
          },
          {
            id: "11",
            name: "丧假",
          },
          {
            id: "12",
            name: "产假",
          },
          {
            id: "13",
            name: "奖励产假",
          },
          {
            id: "14",
            name: "陪产假",
          },
          {
            id: "15",
            name: "探亲假",
          },
          {
            id: "16",
            name: "工伤假",
          },
          {
            id: "17",
            name: "调休",
          },
          {
            id: "18",
            name: "产检假",
          },
          {
            id: "19",
            name: "流产假",
          },
          {
            id: "20",
            name: "长期病假",
          },
          {
            id: "21",
            name: "测试假",
          },
          {
            id: "22",
            name: "补签",
          },
        ],
        type: [
          {
            leaveType: "60000",
            name: "年假",
            isEnable: false,
          },
          {
            leaveType: "60100",
            name: "事假",
            isEnable: false,
          },
          {
            leaveType: "60200",
            name: "病假",
            isEnable: false,
          },
          {
            leaveType: "60300",
            name: "婚假",
            isEnable: false,
          },
          {
            leaveType: "60400",
            name: "丧假",
            isEnable: false,
          },
          {
            leaveType: "60500",
            name: "产假",
            isEnable: false,
          },
          {
            leaveType: "60600",
            name: "奖励产假",
            isEnable: false,
          },
          {
            leaveType: "60700",
            name: "陪产假",
            isEnable: false,
          },
          {
            leaveType: "60800",
            name: "探亲假",
            isEnable: false,
          },
          {
            leaveType: "60900",
            name: "工伤假",
            isEnable: false,
          },
          {
            leaveType: "61000",
            name: "调休假",
            isEnable: false,
          },
          {
            leaveType: "61100",
            name: "产检假",
            isEnable: false,
          },
          {
            leaveType: "61200",
            name: "流产假",
            isEnable: false,
          },
          {
            leaveType: "61300",
            name: "长期病假",
            isEnable: false,
          },
          {
            leaveType: "61400",
            name: "测试假",
            isEnable: false,
          },
        ],
        departmentType: [
          {
            dedTypeCode: "51000",
            name: "迟到扣款",
            isEnable: false,
            departmentId: "",
            periodLowerLimit: "30", // 时间段下限
            periodUpperLimit: "30", // 时间段上限
            timesLowerLimit: "2", // 次数下限
            timesUpperLimit: "2", // 次数上限
            dedAmonutLowerLimit: "30", // 扣款金额下限
            dedAmonutUpperLimit: "0", // 扣款金额上限
            absenceDays: "0.5", // 旷工天数
            fineSalaryMultiples: "2", // 罚款工资倍数
            absenceTimesUpperLimt: "0", // 旷工次数上限
          },
          {
            dedTypeCode: "52000",
            name: "早退扣款",
            isEnable: false,
            departmentId: "",
            periodLowerLimit: "30", // 时间段下限
            periodUpperLimit: "30", // 时间段上限
            timesLowerLimit: "2", // 次数下限
            timesUpperLimit: "2", // 次数上限
            dedAmonutLowerLimit: "30", // 扣款金额下限
            dedAmonutUpperLimit: "0", // 扣款金额上限
            absenceDays: "0.5", // 旷工天数
            fineSalaryMultiples: "2", // 罚款工资倍数
            absenceTimesUpperLimt: "0", // 旷工次数上限
          },
          {
            dedTypeCode: "53000",
            name: "旷工扣款",
            isEnable: false,
            departmentId: "",
            periodLowerLimit: "30", // 时间段下限
            periodUpperLimit: "30", // 时间段上限
            timesLowerLimit: "2", // 次数下限
            timesUpperLimit: "2", // 次数上限
            dedAmonutLowerLimit: "30", // 扣款金额下限
            dedAmonutUpperLimit: "0", // 扣款金额上限
            absenceDays: "0.5", // 旷工天数
            fineSalaryMultiples: "2", // 罚款工资倍数
            absenceTimesUpperLimt: "0", // 旷工次数上限
          },
        ],
        overtimeType: [
          {
            // id: '1',
            departmentId: "", // 部门ID
            rule: "工作日可申请加班", // 规则内容
            ruleStartTime: "", // 规则生效每日开始时间
            ruleEndTime: "", // 规则生效每日结束时间
            isTimeOff: false, // 是否调休
            isEnable: false, // 是否可用
          },
          {
            // id: '2',
            departmentId: "", // 部门ID
            rule: "休息日可申请加班", // 规则内容
            ruleStartTime: "", // 规则生效每日开始时间
            ruleEndTime: "", // 规则生效每日结束时间
            isTimeOff: false, // 是否调休
            isEnable: false, // 是否可用
          },
          {
            // id: '3',
            departmentId: "", // 部门ID
            rule: "法定节假日可申请加班", // 规则内容
            ruleStartTime: "", // 规则生效每日开始时间
            ruleEndTime: "", // 规则生效每日结束时间
            isTimeOff: false, // 是否调休
            isEnable: false, // 是否可用
          },
        ],
      },
      departments: [],
      total: 100,
      attendanceRecord: "",
      monthOfReport: "",
      centerDialogVisible: false,
      tipsDialogVisible: false,
      month: "",
      yearMonth: "",
      loading: false,
      attendInfo: {
        month: "",
        getDate: "",
        getInfo: "",
        name: "",
        counts: "",
        tobeTaskCount: "",
      },
      formData: {
        page: 1,
        pagesize: 10,
        keyword: this.keyword,
        deptID: [], // 性别
        stateID: "",
      },
      page: {
        page: 1,
        pagesize: 10,
        total: 0,
      },
      modifyData: {
        userId: "",
        day: "",
        adtStatu: "",
      },
    };
  },
  // 创建完毕状态
  created() {
    this.getAttendancesList(); // 获取考勤列表
    this.getDepartment(); // 获取考勤列表
  },
  watch: {
    "currentRow.radius": function () {
      // 这里必须用function
      this.cacheObj[this.currentRow.id]?.circle?.setRadius(
        this.currentRow.radius
      );
      const content = `${this.currentRow.radius}米内可打卡`;
      this.cacheObj[this.currentRow.id]?.text.setText(content);
    },
  },
  methods: {
    // 地图
    initMap() {},
    async openPunchDialog() {
      this.showPunchCardDialog = true; // 打卡弹层
      this.companyList = await getCompanyList(); // 获取公司列表
      this.$nextTick(() => {
        this.$refs.companyTable.setCurrentRow(this.companyList[0]); // 选中第一行的表格
        // 初始化地图
        if (!this.gMap) {
          // 只会初始化一次
          this.gMap = new window.AMap.Map("container", {
            zoom: 16, // 设置缩放级别，数值越大，范围越小 看到的位置越详细
          });
        }
        this.selectRow(this.companyList[0]); // 打开的时候聚焦第一个公司的位置
      });
    },
    // 批量保存
    async btnSaveCompany() {
      await updateCompanyList({ list: this.companyList });
      this.$message.success("保存成功");
      this.showPunchCardDialog = false;
    },
    // 点击现中地图区域
    selectRow(row) {
      console.log(row); // row就是一个公司
      this.currentRow = row;
      if (this.gMap) {
        // 地图已经渲染
        this.gMap.setCenter(row.point); // 设置聚焦区域
        // 20个公司 20个标注 20个圆 20个文本
        // { 页码: 数组 }
        // { 公司id: { circle: 对象, text: 对象, marker: 对象  } }
        // 无中生有
        // undefined
        this.cacheObj = this.cacheObj || {}; // 保证永远存在- cacheObj= {}
        this.cacheObj[row.id] = this.cacheObj[row.id] || {}; // cacheObj = { 2: {} }
        // 最起码保证 { 4: {}, 5: {}, 6: {}  }

        const point = new window.AMap.LngLat(...row.point); // 生成一个点位
        // 没有绘制的绘制-画圆
        if (!this.cacheObj[row.id]["circle"]) {
          const circle = new window.AMap.Circle({
            center: point, // 圆心
            radius: row.radius, // 半径
            borderWeight: 0, // 描边的宽度
            strokeOpacity: 1, // 轮廓线透明度
            strokeWeight: 0, // 轮廓线宽度
            fillOpacity: 0.4, // 圆形填充透明度
            strokeStyle: "solid", // 轮廓线样式
            strokeDasharray: [10, 10],
            fillColor: "#1791fc", // 圆形填充颜色
            zIndex: 50, // 圆形的叠加顺序
          });
          this.gMap.add(circle); // 完成在页面上绘制
          this.cacheObj[row.id]["circle"] = circle; // 在内存中缓存圆的对象
        }
        // 添加标注
        if (!this.cacheObj[row.id]["marker"]) {
          const marker = new window.AMap.Marker(point); // 也需要点
          this.gMap.add(marker); // 完成在页面上绘制
          this.cacheObj[row.id]["marker"] = marker; // 在内存中缓存标注的对象
        }
        // 添加文本
        if (!this.cacheObj[row.id]["text"]) {
          const text = new window.AMap.Text({
            text: `${row.radius}米内可打卡`, // 标记显示的文本内容
            anchor: "center", // 设置文本标记锚点位置
            draggable: true, // 是否可拖拽
            cursor: "pointer", // 指定鼠标悬停时的鼠标样式。
            angle: 10, // 点标记的旋转角度
            offset: new window.AMap.Pixel(0, 20), // 偏移量
            style: {
              // 设置文本样式，Object 同 css 样式表
              "text-align": "center",
              "font-size": "20px",
              color: "red",
            },
            position: point, // 点标记在地图上显示的位置
          });
          this.gMap.add(text); // 完成在页面上绘制
          this.cacheObj[row.id]["text"] = text; // 在内存中缓存标注的对象
        }
      }
    },
    // 暂时不处理
    handleSub() {
      this.tipsDialogVisible = false;
      this.$message.success("提醒成功");
    },
    handleTip() {
      this.tipsDialogVisible = true;
    },
    // 设置
    handleSet() {
      this.$refs.set.dialogFormV();
    },
    // 弹框关闭
    handleCloseModal() {
      this.$refs.set.dialogFormH();
    },
    // 获取组织列表
    async getDepartment() {
      this.departments = await getDepartment();
    },

    // 初始化数据
    async getAttendancesList() {
      this.loading = true;
      const { data, monthOfReport, tobeTaskCount } = await getAttendancesList({
        ...this.page,
      });
      this.list = data.rows; // 当前记录
      this.page.total = data.total; // 总条数
      this.attendInfo.counts = data.total;
      this.attendInfo.month = monthOfReport;
      this.attendInfo.tobeTaskCount = tobeTaskCount;

      var date = new Date();
      var year = date.getFullYear();
      const month = monthOfReport;
      var d = new Date(year, month, 0); // 获取月份
      this.monthOfReport = d.getDate(); // 获取日期
      this.yearMonth = year + ("" + month < 10 ? "0" + month : month);
      this.month = monthOfReport;
      this.loading = false;
    },
    // 确定修改
    async btnOK() {
      // await updateAttendance(this.modifyData)
      this.$message.success("更新成功");
      this.centerDialogVisible = false;
      this.getAttendancesList(); // 成功之后 重新拉取数据
    },
    // 页码改变
    pageChange(page) {
      this.page.page = page;
      this.getAttendancesList(); // 获取数据
    },
    showChangeDialog(item, id, it) {
      this.modifyData.userId = item.id;
      this.modifyData.day = it.day;
      this.modifyData.departmentId = item.departmentId;
      this.modifyData.adtStatu = it.adtStatu + ""; // 数字转成字符串

      if (it.adtStatu !== "") {
        this.attendInfo.getDate = parseInt(id + 1);
        this.attendInfo.getInfo = it.adtStatu;
        this.attendInfo.name = item.name;
        this.centerDialogVisible = true;
      }
    },
  },
};
</script>
  
  <style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-table--striped .el-table__body tr.current-row td {
  background-color: #3256e3;
  color: #fff;
}
.tableInfo {
  line-height: 36px;
  border: solid 1px #ebeef5;
  border-right: 0 none;
  border-bottom: 0 none;
  tr {
    th {
      height: 50px;
      text-align: center;
      border-right: solid 1px #ebeef5;
      border-bottom: solid 1px #ebeef5;
      border-bottom: 2px solid #e8e8e8;
      background: #fafafa;
      min-width: 100px;
    }
    td {
      height: 36px;
      text-align: center;
      border-right: solid 1px #ebeef5;
      border-bottom: solid 1px #ebeef5;
    }
  }
}

.attenInfo {
  p {
    &.check {
      padding: 20px 0 0;
    }
    .el-radio {
      display: inline-block;
      width: 60px;
      padding: 5px 0;
    }
  }
}
#container {
  width: 100%;
  height: 80vh;
  background-color: pink;
}
</style>
  